
<template>
  <FormItem 
    v-if="propName && formItemFlag"
    :label="t(`${labelKey}`)" 
    :colon="false"
    v-bind:label-col="{ style: { width: labelWidth} }" :labelAlign="labelAlign" 
    v-bind="editorProps"
    :name="[propName, ...name]"
  >
    <slot></slot>
  </FormItem>
  <div v-else>
    <slot></slot>
  </div>
</template>
<script lang="ts" name="form-item-wrapper" setup>
import { ref, computed, onMounted } from 'vue';
import type { PropType } from 'vue';

import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useI18n } from '/@/hooks/web/useI18n';
import { FormItem } from 'ant-design-vue';
import type { Designer } from '../../type'
const { t } = useI18n('diyForm')

const props = defineProps({
  value: { type: Boolean },
  propName: { type: String, default: null },
  // 兼容属性编辑器嵌套另一个属性编辑器, 倒是右侧设置面板的表单标签展示问题
  formItemFlag: { type: Boolean, default: true},
  optionModel: { type: Object, default: () => {}},
  editorProps: { type: Object, default: () => {}},
  selectedWidget: Object,
  designer: { type: Object as () => Designer},
  // 表单字段名称
  name: { 
    type: Array as PropType<string[] | number[]>,
    default: () => [],
  }
})
const labelKey = computed(() => {
  const name = props.name
  const key = `settings.label.${props.propName}`
  return key + (name && name.length > 0 ? '.' + name.join('.') : '')
})
const labelWidth = ref(props.selectedWidget?.settingForm?.labelWidth || '80px')
const labelAlign = ref(props.selectedWidget?.settingForm?.labelAlign || 'right')
onMounted(() => {

})

</script>

<style lang="less">

</style>
